<template>
    <div class="ForgetPassword">
        <form>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label title f16">手机号:</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input borders"  placeholder="请输入手机号" type="number" v-model="mobile">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label title f16">新密码:</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input borders"  placeholder="请输入密码" type="password" v-model="password">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label title f16">验证码:</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input borders password" placeholder="请输入验证码" type="number" v-model="captcha">
                    <span class="site-color f14" v-show="Verification" @click="sendCode">获取验证码</span>
                    <span class="gray f14" v-show="!Verification" @click="sendCode"><span>{{timer}}</span>秒后重新获取</span>
                </div>
            </div>
        </form>
        <button class="weui-btn weui-btn_primary site-bgcolor" id="rec_btn"  @click="Login">确定</button>
    </div>
</template>

<script>
    import axios from 'axios';
    import Qs from 'qs';
    export default {
        name: "ForgetPassword",
        data(){
            return{
                Verification: true,    //通过v-show控制显示获取还是倒计时
                timer: 60  ,    //定义初始时间为60s
                mobile:'',
                password:'',
                captcha:''
            }
        },
        methods:{
            Login(){
                let data={
                    mobile:this.mobile,
                    newpassword:this.password,
                    captcha:this.captcha,
                    type:'mobile'
                }
                axios({
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    method: 'post',
                    url: process.env.API_ROOT+'/api/User/resetpwd',
                    data: Qs.stringify(data)
                })
                    .then(res=>{
                        if(res.data.code==1) {
                            this.$router.push({path:'/Login'})
                        }else{
                            this.$alert(res.data.msg)
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            handleClick() {
                this.Verification = false;      //点击button改变v-show的状态
                let auth_timer = setInterval(() => {  //定时器设置每秒递减
                    this.timer--;        //递减时间
                    if (this.timer <= 0) {
                        this.Verification = true;    //60s时间结束还原v-show状态并清除定时器
                        clearInterval(auth_timer)
                    }
                }, 1000)
                //发送短信
            },
            sendCode() {//发送验证码

                axios.get(process.env.API_ROOT+'/api/User/sendCaptcha?type=resetpwd&mobile='+this.mobile, {
                })
                    .then(res=>{
                        if(res.data.code==200){
                            this.handleClick();
                        }else{
                            this.$alert(res.data.error)
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            },
        }
    }
</script>

<style scoped>
    @import "../assets/css/common.css";
    .title{
        color: #535353;
        margin-left: -20px;
    }
    .cz{
        color: #b1b1b1;
        float: left;
        padding: 20px 18%;
    }
    .borders{
        border: 1px solid #b1b1b1;
        height: 38px;
        line-height: 38px;
        border-radius: 20px;
        text-align: left;
        margin-left:-18px;
        padding-left: 20px;
    }
    .password{
        width: 60%;
        margin-left: -36px;
    }
    #rec_btn{
        width: 80%;
        border-radius: 30px;
        padding:10px;
        font-weight: normal;
        margin-top: 20px;
    }
    input::-webkit-input-placeholder{
        color: #b1b1b1;
    }
</style>
